<template>
  <!--登录表单的容器-->
  <div class="login_container">
    <!--登录区域-->
    <div class="login_box">
      <!--头像区域-->
      <div class="avatar_box">
        <!--头像图片-->
        <img src="../../assets/imgs/ava.gif">
      </div>
      <!--登录的表单-->
      <el-form ref="form" :model="form" :rules="loginRules" label-width="0px" class="login_form">
        <!--用户名-->
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="iconfont el-icon-user"></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" type="password" prefix-icon="el-icon-suitcase-1">
          </el-input>
        </el-form-item>
        <!--验证码-->
        <el-form-item prop="verifyCode">
          <div class="verifyCode_box">
            <el-input v-model="form.verifyCode" placeholder="请输入手机验证码" prefix-icon="el-icon-mobile" class="verifyCode">
            </el-input>
            <img src="../../assets/imgs/yzm.png" alt="" class="verifyCode_img">
          </div>
        </el-form-item>
        <!--登录按钮-->
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">登录</el-button>
          <el-button type="reset" @click="(form={})">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
  import { mapMutations } from "vuex";
  import { USERLOGIN, USERLOGOUT } from "../../store/types";
  import { login } from "../../api/user";
  export default {
    name: "Login",
    //data属性
    data() {
      return {
        //登录表单数据（账号and密码）
        form: {
          username: "xiaoge",
          password: "123456",
          verifyCode: '',
        },
        loginRules: {
          username: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            // { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            // { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
          ],
          verifyCode: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ]
        }
      };
    },
    //methods方法
    methods: {
      ...mapMutations([USERLOGIN, USERLOGOUT]),
      //表单验证
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let result = await login(this.form.username, this.form.password);
            const token = result.data.token;
            console.log(result);
            //将token存储在本地储存（localStorage）
            // window.localStorage.setItem("token", token)
            //将token存储在vuex里，官方不推荐使用这种方式，有bug
            // this.$store.state.token = token
            //第二种方式,将token存储在vuex里,需要封装
            // this.$store.commit("setToken", token)
            // this.$router.push('/home')
            //第三种方式，封装
            if (token != "") {
              // 保存token 用于权限验证
              this[USERLOGIN](token);
              this.$router.push("/home");
            } else {
              this.$message({
                message: "你的账号密码错误",
                type: "error",
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .login_container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: aquamarine;
  }

  .login_box {
    border: 1px solid red;
    width: 400px;
    height: 400px;
    position: relative;

    .avatar_box {
      width: 100px;
      height: 100px;
      position: absolute;
      border: 1px solid #000000;
      border-radius: 50%;
      padding: 5px;
      top: -60px;
      right: 150px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .login_form {
      margin-top: 70px;
      padding: 0px 20px;
      width: 100%;
      box-sizing: border-box;



      .verifyCode_box {
        display: flex;

        .verifyCode {
          /* width: 70%;
          justify-content: left; */
          flex: 2;
        }

        .verifyCode_img {
          width: 30%;
          height: 43px;
          /*justify-content: flex-end; */
          flex: 1;
        }
      }

    }
  }
</style>